<template>
  <div id="infor">
    <nav-header
      :type="index"
      @getIndex="getNum($event)"
      @sendList="getList()"
      ref="header"
      :searchDefault="searchDefault"
      :page="sonPage"
    ></nav-header>
    <div class="all-content">
      <div class="sidebar">
        <sidebar
          :tags="tags"
          @conIndex="getIndex($event)"
          ref="father"
          :defaultIndex="defaultIndex"
        ></sidebar>
      </div>
      <div class="right-content">
        <div class="new">最新动态推荐~</div>
        <div v-if="ctnIndex == 0">
          <div v-if="artList.length != 0" v-loading="loading">
            <div class="article" v-for="(item, index) in artList" :key="index">
              <div class="article-top">
                <div class="headerCtn">
                  <div class="article-header" @click="goUp(item.articleUserid)">
                    <img :src="item.headImage" alt />
                  </div>
                  <div class="fansIcon" v-if="item.userIdentity == 1">
                    <img src="../assets/imgs/xhv.png" alt />
                  </div>
                  <div class="fansIcon" v-if="item.userIdentity == 2">
                    <img src="../assets/imgs/xlv.png" alt />
                  </div>
                  <div class="fansIcon" v-if="item.userIdentity == 3">
                    <img src="../assets/imgs/green.png" alt />
                  </div>
                </div>
                <div class="article-right">
                  <div class="article-name">
                    <span>{{ item.nickName }}</span>
                    <div class="stars" v-if="item.forward == 0">
                      <div
                        class="singleStar"
                        v-for="itemStar in item.stars"
                        :key="itemStar"
                      >
                        <img src="../assets/imgs/hb.png" alt />
                      </div>
                    </div>
                  </div>
                  <div class="article-date">{{ item.updateTime }}</div>
                </div>
                <div class="collect" @click="showCollect(item.articleId)">
                  <img src="../assets/imgs/collect.png" alt />
                </div>
                <div
                  class="collectModal"
                  v-if="item.showCollect"
                  @click="collect(item.articleId)"
                >
                  <span v-if="item.isCollect == 0">添加到收藏</span>
                  <span v-else>取消收藏</span>
                </div>
              </div>
              <div class="small-content" v-if="item.forward == 0">
                <div
                  class="content-top"
                  @click="jumpPage('artDetail', item.articleId)"
                >
                  <div class="article-title">{{ item.articleTitle }}</div>
                  <div class="article-content">{{ item.articleContent }}</div>
                </div>
                <div class="article-pic" v-if="item.show">
                  <div
                    class="single-pic"
                    v-for="itemSon in item.pic"
                    :key="itemSon.index"
                  >
                    <img :src="itemSon" alt v-image-preview />
                  </div>
                </div>
                <div class="TagCtn">
                  <div
                    class="articleTag TagModule"
                    @click="tagDetail(item.interest, item.articleInterestId)"
                  >
                    #{{ item.interest }}
                  </div>
                  <SelectTag :talk="item.talk"></SelectTag>
                </div>
                <div class="article-btn">
                  <div
                    class="btn-single"
                    @click="getFavor(item.articleId, item.articleUserid)"
                  >
                    <div class="btn-icon cupIcon">
                      <img
                        src="../assets/imgs/dz.png"
                        v-if="item.isPoint == 0"
                      />
                      <img src="../assets/imgs/hz.png" v-else />
                    </div>
                    <div class="btn-number">{{ item.pointCount }}</div>
                  </div>
                  <div
                    class="btn-single"
                    @click="jumpPage('artDetail', item.articleId)"
                  >
                    <div class="btn-icon detail">
                      <img src="../assets/imgs/hf.png" />
                    </div>
                    <div class="btn-number">{{ item.commentCount }}</div>
                  </div>
                  <div class="btn-single" @click="forwardBtn(item.articleId)">
                    <div class="btn-icon zhuanfa">
                      <img src="../assets/imgs/zf.png" />
                    </div>
                    <div class="btn-number">{{ item.forwardCount }}</div>
                  </div>
                  <div class="btn-single btnFx">
                    <Copy :artId="item.articleId"></Copy>
                  </div>
                  <div class="reportBtn" @click="showReport(item.articleId)">
                    <div class="reportIcon">
                      <img src="../assets/imgs/jubaoIcon.png" alt />
                    </div>
                    <span class="reportText">举报</span>
                  </div>
                </div>
              </div>
              <div class="small-content" v-else>
                <div class="forwardText" v-if="item.forwardContent != ''">
                  {{ item.forwardContent }}
                </div>
                <div
                  class="forwardCtn"
                  @click="jumpPage('artDetail', item.getForwardArticleId)"
                >
                  <div class="forwardImg">
                    <img :src="item.getForwardHeadImage" alt />
                  </div>
                  <div class="forwardTitle">{{ item.articleTitle }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="article noList" v-else>当前还没有内容哦~</div>
        </div>
        <div v-if="ctnIndex == 1">
          <div v-if="userList.length != 0" v-loading="loading">
            <div class="userRes" v-for="(item, index) in userList" :key="index">
              <div class="userLeft">
                <div class="userCtn">
                  <div class="userHeader" @click="goUp(item.id)">
                    <img :src="item.headImage" alt />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 1">
                    <img src="../assets/imgs/xhv.png" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 2">
                    <img src="../assets/imgs/xlv.png" alt="" />
                  </div>
                  <div class="fansIcon" v-if="item.identity == 3">
                    <img src="../assets/imgs/green.png" alt="" />
                  </div>
                </div>

                <div class="userName">
                  <div class="nickName">{{ item.nickName }}</div>
                  <div class="userIntroduce" v-if="item.introduce != null">
                    {{ item.introduce }}
                  </div>
                  <div class="userIntroduce" v-else>暂时没有签名</div>
                </div>
              </div>
              <div
                class="userConcern"
                v-if="item.isFollow == 0"
                @click="concern(item.id)"
              >
                关注
              </div>
              <div
                class="userConcern loseBtn"
                v-if="item.isFollow == 1"
                @click="concern(item.id)"
              >
                已关注
              </div>
            </div>
          </div>
          <div class="article noList" v-else>当前还没有内容哦~</div>
        </div>
      </div>
    </div>
    <!-- 文章分页 -->
    <div class="paging" v-if="artList.length != 0 && ctnIndex === 0">
      <el-pagination
        layout="prev, pager, next"
        :total="count"
        :page-size="20"
        :background="true"
        :pager-count="7"
        :current-page="nowPage"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <!-- 用户分页 -->
    <div class="paging" v-if="userList.length != 0 && ctnIndex === 1">
      <el-pagination
        layout="prev, pager, next"
        :total="userCount"
        :page-size="20"
        :background="true"
        :current-page="nowUserPage"
        :pager-count="7"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <ForwardModal ref="forward" :listId="listId"></ForwardModal>
    <Report ref="report" :reportId="reportId"></Report>
    <sign ref="sign"></sign>
    <nav-footer ref="child"></nav-footer>
  </div>
</template>
<script>
import defaultImg from "../assets/imgs/default.png";
import NavHeader from "../components/Header";
import NavFooter from "../components/Footer";
import Sidebar from "../components/Sidebar";
import Submit from "../components/Submit";
import Sign from "../components/Sign";
import PersonModal from "../components/PersonModal";
import ForwardModal from "../components/ForwardModal";
import Copy from "../components/Copy";
import SelectTag from "../components/SelectTag";
import Report from "../components/Report";

import axios from "axios";
export default {
  data() {
    return {
      index: "index",
      tags: [
        { name: "文章结果", id: 0 },
        { name: "用户结果", id: 1 },
      ],
      loading: true,
      interList: [],
      defaultIndex: 0,
      ctnIndex: 0,
      user: "",
      artList: [],
      list: "",
      isSpecial: 0,
      res: "",
      collectModal: false,
      totalPage: 0,
      currentPage: 1,
      count: 0,
      sonPage: 1,
      concernIndex: 0,
      articleList: [],
      listId: 0,
      reportId: 0,
      searchDefault: "",
      keyword: "",
      userList: [],
      userCount: null,
      userPage: null,
      nowPage: 1,
      nowUserPage: 1,
    };
  },

  components: {
    NavHeader,
    Sidebar,
    Submit,
    NavFooter,
    Sign,
    PersonModal,
    ForwardModal,
    Copy,
    SelectTag,
    Report,
  },
  created() {
    if (this.$route.query.keyword != "") {
      this.keyword = this.$route.query.keyword;
      this.searchDefault = this.keyword;
      this.init({
        url: `/laiwen/article/frontend/slist?keyword=${this.keyword}`,
        listName: "list",
        page: 1,
        userPage: 1,
      });
    }
    console.log(this.artList);
  },
  mounted() {
    this.getRem(1920, 100);
  },
  watch: {
    //监听路由,重新获取关键词操作
    $route: {
      handler() {
        this.keyword = this.$route.query.keyword;
        this.searchDefault = this.keyword;
        this.init({
          url: `/laiwen/article/frontend/slist?keyword=${this.keyword}`,
          listName: "list",
          page: 1,
          userPage: 1,
        });
      },
    },
  },
  methods: {
    init({ url, listName, page, userPage }) {
      console.log(url);
      this.$fetch(
        `${url}&page=${page}&limit=20&userPage=${userPage}&userLimit=20`,
        {}
      ).then((res) => {
        this.loading = false;
        this.totalPage = res.totalPages * 1;
        this.count = res.count * 1;
        this.res = res;
        this.$set(res, "articleShow", true);
        this.artList = res[listName];
        //处理图片为空的样式
        for (let i of this.artList.keys()) {
          this.$set(this.artList[i], "show", true);
          if (this.artList[i].articlePicture == "") {
            this.$set(this.artList[i], "show", false);
          }
          //处理图片数组
          let picArray = [];
          picArray = this.artList[i].articlePicture.split(",").filter((e) => e);
          this.$set(this.artList[i], "pic", picArray);
          //处理星星数组
          if (this.artList[i].award) {
            let len = this.artList[i].award + 1;
            let stars = [];
            stars.length = len;
            this.$set(this.artList[i], "stars", stars);
          }
          //处理收藏模态窗
          this.$set(this.artList[i], "showCollect", false);
          //处理talk为空的情况
          this.$set(this.artList[i], "showTalk", true);
          if (this.artList[i].talk == null) {
            this.$set(this.artList[i], "showTalk", false);
          }
        }
        //list为空的样式处理
        if (this.artList.length == 0) {
          this.$set(res, "articleShow", false);
        }
        //搜索用户
        if (res.users.length !== 0) {
          this.userPage = res.userTotalPages;
          this.userCount = res.userCount;
          this.userList = res.users;
          console.log("用户调用");
        } else {
          //重置页数和列表
          this.userPage = 0;
          this.userCount = 0;
          this.userList.length = 0;
        }
      });
    },
    //接受子组件index
    getIndex(e) {
      this.ctnIndex = e;
    },
    showReport(id) {
      this.reportId = id;
      this.$refs.report.clear();
    },
    //展示收藏的模态窗
    showCollect(id) {
      let res = [...this.artList].find((item) => item.articleId == id);
      res.showCollect = !res.showCollect;
    },
    //触发转发模态窗
    forwardBtn(e) {
      this.listId = e;
      this.$refs.forward.showModal();
    },
    //收藏
    collect(id) {
      let res = [...this.artList].find((item) => item.articleId == id);
      this.showCollect(id);
      let collect = {};
      this.$set(collect, "getCollectId", res.articleUserid);
      this.$set(collect, "collectPostId", res.articleId);
      this.$post(`/laiwen/collect/frontend/save`, collect).then((val) => {
        if (res.isCollect == 0) {
          res.isCollect = 1;
          this.$message.success("收藏成功");
        } else {
          res.isCollect = 0;
          this.$message("取消收藏");
        }
      });
      console.log(collect);
    },
    //点赞方法
    getFavor(articleId, userId) {
      let that = this;
      let favor = {};
      that.$set(favor, "articleId", articleId);
      that.$set(favor, "getPointId", userId);
      that.$post("/laiwen/point/frontend/save", favor).then((res) => {
        for (let i of that.artList.keys()) {
          if (articleId == that.artList[i].articleId) {
            if (that.artList[i].isPoint == 0) {
              this.$message({
                message: "点赞成功",
                type: "success",
              });
              that.artList[i].isPoint = 1;
              that.artList[i].pointCount += 1;
            } else {
              this.$message("取消点赞");
              that.artList[i].isPoint = 0;
              that.artList[i].pointCount -= 1;
            }
          }
        }
      });
    },
    //关注操作
    concern(id) {
      let that = this;
      if (!this.tourist()) {
        return true;
      }
      //处理自己关注自己
      if (!that.isConcern(id)) {
        return false;
      }

      that
        .$post(`/laiwen/follow/frontend/save?getFollowId=${id}`, {})
        .then((res) => {
          let user = [...this.userList].find((item) => item.id == id);
          if (user.isFollow == 0) {
            user.isFollow = 1;
          } else {
            user.isFollow = 0;
          }
        });
    },
    //跳转页面
    goHtml(e) {
      this.$router.push({
        path: `/${e}`,
      });
    },
    jumpPage(path, id) {
      this.navigate(path, id);
    },
    //Up主页面
    goUp(id) {
      this.$router.push({
        path: "/home",
        query: { id: id },
      });
    },
    //分页方法
    changePage(size) {
      if (this.ctnIndex === 0) {
        this.nowPage = size;
        this.init({
          url: `/laiwen/article/frontend/slist?keyword=${this.keyword}`,
          listName: "list",
          page: size,
          userPage: 1,
        });
      } else {
        this.nowUserPage = size;
        this.init({
          url: `/laiwen/article/frontend/slist?keyword=${this.keyword}`,
          listName: "list",
          page: 1,
          userPage: size,
        });
      }
    },

    //获取搜索的列表
    getList() {
      //获取到的列表
      console.log(this.$refs.header.Searchlist);
    },
    //专题详情
    tagDetail(name, id) {
      if (!this.tourist()) {
        return true;
      }
      this.$router.push({
        path: "/tag",
        query: { name: `${name}`, id: `${id}` },
      });
    },
    //标签详情
    favorDetail(name) {
      if (!this.tourist()) {
        return true;
      }
      this.$router.push({
        path: "/favorTag",
        query: { name: `${name}` },
      });
    },
  },
};
</script>

<style scoped src="../assets/css/searchRes.css"></style>
